<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf8">
            <meta name="viewport" content="width=device-width,initial-scale=1.0">
            <script language="javascript">
            function setupWebViewJavascriptBridge(callback) {
                if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
                if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
                window.WVJBCallbacks = [callback];
                var WVJBIframe = document.createElement('iframe');
                WVJBIframe.style.display = 'none';
                WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
                document.documentElement.appendChild(WVJBIframe);
                setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
            }
            
            setupWebViewJavascriptBridge(function(bridge) {
                 bridge.registerHandler('locationClick', function(data, responseCallback) {
                     var json = data;
                     data.
                    alert('---JS方法被调用:'+data);
                    responseCallback('js执行过了');
                 })
            })

            function locationClick() {
                // 这里主要是注册 OC 将要调用的 JS 方法。
                WebViewJavascriptBridge.callHandler('locationClick',null,function(response) {
                    alert(response);
                    document.getElementById("returnValue").value = response;
                });
                //window.webkit.messageHandlers.jsFunc.postMessage({name : "李四",age : 22});
            }
            /*if (sessionStorage.clickcount) {
                sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
                sessionStorage.setItem("lastName","2021-03-11 14:18:32 存储")
            } else {
                sessionStorage.clickcount = 1;
                sessionStorage.setItem("lastName","2021-03-11 存储")
            }*/
            function clickCounter() {
                if(typeof(Storage) !== "undefined") {
                    /*if (sessionStorage.clickcount) {
                        sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
                        sessionStorage.setItem("lastName","2021-03-11 14:18:32")
                    } else {
                        sessionStorage.clickcount = 1;
                        sessionStorage.setItem("lastName","2021-03-11")
                    }*/
                    document.getElementById("result").innerHTML = "你在按钮上已经点击了 " + sessionStorage.getItem("lastName") + " 次。";
                } else {
                    document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
                }
            }
            
            </script>
            </head>
    
    <body>
        <h1>这是按钮调用</h1>
        <input id = 'locationBtn' type="button" value="获取定位" onclick="locationClick()" />
        <h1>这是回调结果展示区</h1>
        <textarea id ="returnValue" type="value" rows="5" cols="50">
        
        </textarea>
        
        
        <p><button onclick="clickCounter()" type="button">点我!</button></p>
        <div id="result"></div>
        <p>点击按钮查看数字变化。</p>
        <p>关闭浏览器并重新打开，看看数值是否重置了。</p>
    </body>
</html>
